<template>
    <el-form inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="类型">
            <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="事假" value="事假" />
                <el-option label="病假" value="病假" />
            </el-select>
        </el-form-item>
        <el-form-item label="请假状态">
            <el-select v-model="formInline.state" placeholder="请选择">
                <el-option label="提交申请" value="1" />
                <el-option label="老师已同意" value="2" />
                <el-option label="家长已确认" value="3" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="empty">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="top">
        <el-button type="primary" size="small" @click="open()">
            <el-icon>
                <Edit />
            </el-icon>
            &nbsp;
            请假
        </el-button>
    </div>
    <el-table :data="studentDatas" border style="width: 100%" stripe>
        <el-table-column label="序号" width="80" align="center">
            <template #default="scope">
                {{ scope.$index + 1 }}
            </template>
        </el-table-column>
        <el-table-column prop="student.name" label="请假学生" align="center" />
        <el-table-column label="年级班级" align="center">
            <template #default="scope">
                {{ ` ${grade[scope.row.student.classes.gradeId]}年级${grade[scope.row.student.classes.classId]}班` }}
            </template>
        </el-table-column>
        <el-table-column prop="type" label="请假类型" align="center" />
        <el-table-column label="请假时间" align="center" width="300">
            <template #default="scope">
                {{ ` ${scope.row.beginTime}至${scope.row.endTime}` }}
            </template>
        </el-table-column>
        <el-table-column prop="detail" label="请假事由" align="center" />
        <el-table-column prop="teacher.name" label="发起人" align="center" />
        <el-table-column prop="initTime" label="发起时间" align="center" width="160" />
        <el-table-column label="请假状态" align="center">
            <template #default="scope">
                {{ state[scope.row.state] }}
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
            <template #default="scope">
                <el-row>
                    <el-tag size="small" color="white" type="success" @click="see(scope.row)">
                        {{ '查看' }}
                    </el-tag>
                    <el-tag size="small" color="white" type="success" @click="remove(scope.row)">
                        {{ '撤销' }}
                    </el-tag>
                </el-row>
            </template>
        </el-table-column>
    </el-table>
    <!-- 页码 -->
    <div class="jump">
        <el-pagination layout="prev, pager, next" background :total="page * 10" @current-change="handleCurrentChange" />
        <span>{{ `共&nbsp;&nbsp;${page}&nbsp;&nbsp;页` }}</span>
        <span>跳至</span>
        <el-input v-model="input" />
        <span>页</span>
        <el-button @click="jump">确定</el-button>
        <el-select v-model="select" placeholder="6页/条 " style="width: 115px">
            <el-option label="5页/条" value="5" @click="fn" />
            <el-option label="7页/条" value="7" @click="fn" />
            <el-option label="8页/条" value="8" @click="fn" />
        </el-select>
    </div>
    <!-- 弹出层 -->
    <el-dialog v-model="centerDialogVisible" title="编辑类型" width="40%" align-center>
        <el-form label-position="right" label-width="100px" :model="form" style="max-width: 460px" :rules="rules"
            status-icon ref="ruleFormRef">
            <el-form-item label="发起人:">
                {{ form.tId }}
            </el-form-item>
            <el-form-item label="请假学生:" prop="sId">
                <el-input v-model="form.sId" />
            </el-form-item>
            <el-form-item label="请假类型:" prop="type">
                <el-select class="type" v-model="form.type" placeholder="请选择">
                    <el-option label="病假" value="病假" />
                    <el-option label="事假" value="事假" />
                </el-select>
            </el-form-item>
            <el-form-item label="启止时间:" prop="value">
                <el-date-picker v-model="form.value" type="daterange" :default-time="defaultTime" />
            </el-form-item>
            <el-form-item label="请假事由:" prop="detail">
                <el-input v-model="form.detail" class="detail" type="daterange" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button>取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef, form)">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
    <!-- 抽屉 -->
    <el-drawer v-model="drawer" title="查看请假申请" :before-close="handleClose">
        <p><span>{{ studentData.student.name }}</span>/<span>{{ studentData.student.sex == 1 ? '男' : '女' }}</span>/<span>{{
            grade[studentData.student.classes.gradeId] }}年级（{{ grade[studentData.student.classes.classId] }}）班</span>
        </p>
        <p style="color: #D7C4BD;"><span>{{ studentData.teacher.name }}</span><span>{{ studentData.initTime }}</span></p>
        <p>请假类型：<span>{{ studentData.type }}</span></p>
        <p>请假时间：<span style="color: #646464;">日历时间({{ studentData.beginTime }} 至 {{ studentData.endTime }})</span></p>
        <p>请假事由：<span style="color: #646464;">{{ studentData.detail }}</span></p>
        <div class="drawerFlow">
            <h4 style="margin-bottom: 50px; color: #646464;">审批流程</h4>
            <!-- 步骤条 -->
            <!-- active决定流程到第几个，finish-status决定状态 -->
            <el-steps :space="200" direction="vertical " finish-status="success" style="height: 200px;">
                <el-step style="color: #646464;" :title="'班主任' + studentData.teacher.name" />
                <el-step :title="studentData.student.name + '家长'" />
            </el-steps>
        </div>
    </el-drawer>
</template>

<script   setup lang="ts">
import { ElNotification } from 'element-plus'
import { ref, onMounted } from 'vue'
import 'element-plus/es/components/notification/style/css'
import service from "@/api"
const drawer = ref(false)
const studentDatas: any = ref([])
const studentData: any = ref([])
const ruleFormRef: any = ref()
const cp: any = ref('1')
const ps: any = ref('6')
const input: any = ref('')
const page: any = ref('')
const select: any = ref('')
const centerDialogVisible = ref(false)
const value = ref('')
const defaultTime: any = ref([
    new Date(2000 - 1 - 1),
    new Date(2000 - 2 - 1),
])
//查询相关变量
const formInline = ref({
    state: '',
    region: '',
})
//抽屉关闭
const handleClose = () => {
    drawer.value = false
    // console.log('我关闭了');
}
//年级对应表
const grade: any = ref({ 1: "一", 2: "二", 3: "三", 4: "四", 5: "五", 6: "六", })
//请假状态对应表
const state: any = ref({ 1: "提交申请", 2: "老师已同意", 3: "家长已确认" })
const form: any = ref({
    tId: '1001',
    sId: '',
    type: '',
    beginTime: '',
    endTime: '',
    detail: '', //请假事由
    state: '1',//状态码(1:提交申请 2:老师已同意 3:家长已确认)
})
const id: any = ref('')
//拿学生列表
let student: any = ref([])
let datas: any = ref([])
//验证规则
const rules: any = ref({
    sId: [{ required: true, message: '请输入学生', trigger: 'change' }],
    value: [{ required: true, message: '请输入时间', trigger: 'change' }],
    detail: [{ required: true, message: '请输入事由', trigger: 'change' }],
    type: [{ required: true, message: '请输入类型', trigger: 'change' }],
})
onMounted(async () => {
    reduce()
    let res = await service.students.getStudentByPage()
    student.value = res.data.data.date
})
function open() {
    form.value = {
        tId: '1001',
        sId: '',
        type: '',
        beginTime: '',
        endTime: '',
        detail: '', //请假事由
        state: '1',//状态码(1:提交申请 2:老师已同意 3:家长已确认)
    }
    centerDialogVisible.value = true
}
const submitForm = async (formEl: any, ele: any) => {
    // console.log(form.value);
    form.value.beginTime = data(new Date(ele.value[0]).toLocaleDateString()) + ' ' + new Date(ele.value[0]).toLocaleTimeString()
    form.value.endTime = data(new Date(ele.value[1]).toLocaleDateString()) + ' ' + new Date(ele.value[1]).toLocaleTimeString()
    formEl.validate(async (valid: any) => {
        id.value = student.value.find((item: any) => item.name == form.value.sId)
        if (id.value) {
            datas.value = form.value
            datas.value.sId = id.value.id
        } else {
            ElNotification.success({ message: '没有该学生' });
            return
        }
        if (valid) {
            let res = await service.students.saveLeaveApplication(datas.value)
            if (res.data.code == 200) {
                ElNotification.success({ message: '添加请假成功' });
                reduce()
                centerDialogVisible.value = false
            } else {
                ElNotification.success({ message: '增加失败,出现异常了,请联系相关人员' });
            }

        } else {
            ElNotification.success({ message: '请先填写你要请假学生的信息' });
        }
    })
}
//封装
function data(ele: any) {
    return ele.split('/').join('-')
}
//点击切换页数
const handleCurrentChange = async (val: any) => {
    cp.value = val
    reduce()
}
//跳转页数
function jump() {
    if (input.value > page.value) {
        ElNotification.success({ message: '请输入正确页数' });
        input.value = ''
        return
    }
    cp.value = input.value
    reduce()
    input.value = ''
}
//渲染数据
async function reduce() {
    let res = await service.students.getLeaveApplicationByPage({ cp: cp.value, ps: ps.value })
    if (res.data.code == 200) {
        studentDatas.value = res.data.data.data
        page.value = res.data.data.page.pages
    }
}
//点击查看
function see(value: any) {
    studentData.value = value
    // console.log(value);
    drawer.value = true
}
//撤销请假
async function remove(ele: any) {
    let res = await service.students.deleteLeaveApplication(ele)
    if (res.data.code == 200) {
        ElNotification.success({ message: '删除成功' });
        reduce()
    } else {
        ElNotification.success({ message: '删除失败，待会再试' });
    }
}
//一页多少条数据
function fn() {
    ps.value = select.value
    reduce()
}
//查询
async function onSubmit() {
    if (formInline.value.region) {
        let res = await service.students.getLeaveApplicationByPage({ cp: '1', ps: '20000' })
        studentDatas.value = res.data.data.data.filter((item: any) => item.type == formInline.value.region)
        page.value = ''
    }
    if (formInline.value.region && formInline.value.state) {
        let res = await service.students.getLeaveApplicationByPage({ cp: '1', ps: '20000' })
        let data = res.data.data.data.filter((item: any) => item.type == formInline.value.region)
        studentDatas.value = data.filter((item: any) => item.state == formInline.value.state)
        page.value = ''
    }
    if (formInline.value.state.trim() == '' && formInline.value.region.trim() == '') {
        reduce()
    }
}
//重置
function empty() {
    formInline.value = { state: '', region: '' }
}
</script>

<style lang="scss" scoped>
.el-row {

    justify-content: center;

    .el-tag {
        border: none;
        cursor: pointer;
        margin-left: 5px;
    }
}

.top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}

.el-form {
    .type {
        width: 100%;
    }

    .detail {
        height: 100px;
        padding: none;
    }
}

.el-table {
    font-size: 13px;
}

.jump {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;

    .el-input {
        width: 5%;
    }
}



.jump span,
.jump .el-select {
    margin: 0px 10px;
}
</style>